<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/zhuce.css">
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="img/404/login.jpg" alt="">
            <div class="logo">
                <a href="index.html"><img src="img/404/logo.png" alt=""></a>
             </div>
        </div>
        <div class="right">
            <div class="login">
                <p class="title">注册</p>
                <input type="text" id="uname" placeholder="真实姓名*" onblur="checkuname()" onfocus="hq1()">
                <span id="u_name"></span>
                <input type="text" placeholder="手机*" id="phone" onblur="checkPhone()">
                <span id="u_phone"></span>
                <input type="password" placeholder="密码*" id="pwd" onfocus="hq()" onblur="checkpwd()">
                <span id="u_pwd"></span>
                <input type="password" placeholder="再次输入密码*" id="rpwd" onblur="checkrpwd()">
                <span id="r_pwd"></span>
                <p><input type="checkbox" id="d1"><label for="d1">获取大疆最新产品、服务、软件升级等信息。</label></p> 
                <p><input type="checkbox" id="d2"><label for="d2">同意并愿意遵守大疆创新隐私政策和使用条款</label></p> 
                <a href="#" class="dl" onclick="zc()">注册</a>
                <a href="login.html" class="zc">立即登录</a>
            </div>
        </div>
    </div>
</body>
<script>
    function hq1(){
        u_name.innerHTML="请输入姓名";
    }
    function checkuname(){
        var uname=document.getElementById("uname").value;
        var u_name=document.getElementById("u_name");
        u_name.innerHTML=""
        var reguname=/^[\u4e00-\u9fa5]{2,8}$/;
        if(reguname.test(uname)==false){
            u_name.innerHTML="用户名不正确";
            return false;
        }else if(uname==""){
            u_name.innerHTML="用户名不能为空";
            return false;
        }
        return true;
    }
    function checkPhone(){
        var phone=document.getElementById("phone").value;
        var uphone=document.getElementById("u_phone");
        uphone.innerHTML="请输入手机号";
        var regphone=/^1[3-9]\d{9}$/;
        if(!regphone.test(phone)==true){
            uphone.innerHTML="请输入正确的手机号"
            return false;
        }else if(phone==""){
            uphone.innerHTML="手机号不能为空";
            return false;
        }else{
            uphone.innerHTML="";
            return true;
        }  
    }
    // 验证密码
    function hq(){
        u_pwd.innerHTML="密码由6-10位字母或数字组成";
    }
    function checkpwd(){
        var pwd=document.getElementById("pwd").value;
        var upwd=document.getElementById("u_pwd");
        upwd.innerHTML="";
        var regpwd=/^[a-zA-Z0-9]{6,10}$/;
        if(!regpwd.test(pwd)==true){
            upwd.innerHTML="请输入正确的密码格式"
            return false;
        }else if(pwd==""){
            upwd.innerHTML="密码不能为空";
            return false;
        }else{
            upwd.innerHTML="";
            return;
        }
    }
    // 二次验证密码
    function checkrpwd(){
        var pwd=document.getElementById("pwd").value;
        var repwd=document.getElementById("rpwd").value;
        var rpwd=document.getElementById("r_pwd");
        rpwd.innerHTML="";
        if(pwd!=repwd){
            rpwd.innerHTML="两次输入密码不一致";
            return false;
        }else{return true}
    }
    //注册用户
    function zc(){
        var $uname=uname.value
        var $phone=phone.value
        var $upwd=pwd.value
        var $rpwd=document.getElementById("rpwd").value;
        //span标签
        var u_name=document.getElementById("u_name");
        var uphone=document.getElementById("u_phone");
        var upwd=document.getElementById("u_pwd");
        var rpwd=document.getElementById("r_pwd");
        //验证用户名
        var reguname=/^[\u4e00-\u9fa5]{2,8}$/;
        if(!reguname.test($uname)==true){
            u_name.innerHTML="用户名不正确";
            return false;
        }
        //验证手机号
        var regphone=/^1[3-9]\d{9}$/;
        if(!regphone.test($phone)==true){
            uphone.innerHTML="请输入正确的手机号"
            return false;
        }
        //二次验证密码
        if($upwd!=$rpwd){
            rpwd.innerHTML="两次输入密码不一致";
            return false;
        }
        var xhr=new XMLHttpRequest();
        var formdata="name="+$uname+"&uphone="+$phone+"&upwd="+$upwd;
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var result=xhr.responseText
                if(result==1){
                    alert("注册成功")
                }else{
                    alert("注册失败，请重试")
                }
            }
             window.location.href ="http://127.0.0.1:8080/login.html";
        }
        xhr.open("post","http://127.0.0.1:8080/user/reg",true)
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(formdata)
    }
</script>
</html>